import React, { Component } from 'react';
import {
    NavBar,
    Toast,
    InputItem,
    WhiteSpace,
    WingBlank,
    Button,
} from 'antd-mobile';
import '../css/register.css';
import request from '../plugin/request';

class Register extends Component {
    state = {
        usernameHasError: false,
        username: '',
        nicknameHasError: false,
        nickname: '',
        passwordHasError: false,
        password: '',
    };

    constructor(props) {
        // 必须调用父级构造函数
        super(props);
        // 绑定事件函数内部的 this
        this.register = this.register.bind(this);
    }

    usernameErrorClick = () => {
        if (this.state.usernameHasError) {
            Toast.fail('用户名必须是 5 ~ 20 位的字母数字下划线组合的字符');
        }
    };

    usernameChange = (username) => {
        if (/^[a-zA-Z0-9_]{5,20}$/.test(username)) {
            this.setState({
                usernameHasError: false,
            });
        } else {
            this.setState({
                usernameHasError: true,
            });
        }
        this.setState({
            username,
        });
    };

    nicknameErrorClick = () => {
        if (this.state.nicknameHasError) {
            Toast.fail('昵称必须是 2 ~ 20 位的字符');
        }
    };

    nicknameChange = (nickname) => {
        if (nickname.length > 0 && nickname.length < 20) {
            this.setState({
                nicknameHasError: false,
            });
        } else {
            this.setState({
                nicknameHasError: true,
            });
        }
        this.setState({
            nickname,
        });
    };

    passwordErrorClick = () => {
        if (this.state.passwordHasError) {
            Toast.fail('密码至少 6 位');
        }
    };

    passwordChange = (password) => {
        if (/^[a-zA-Z0-9_]{6,}$/.test(password)) {
            this.setState({
                passwordHasError: false,
            });
        } else {
            this.setState({
                passwordHasError: true,
            });
        }
        this.setState({
            password,
        });
    };

    async register() {
        const res = await request.post('/register', {
            username: this.state.username,
            password: this.state.password,
            nickname: this.state.nickname,
        });
        console.log(res);
        if (res.code !== 201) {
            Toast.fail(res.message);
            return;
        }
        // 注册成功，跳转到登录页面
        this.props.history.push('/login');
    }

    render() {
        return (
            <div className="register">
                {/* 顶部导航 */}
                <NavBar mode="dark">网站博客</NavBar>

                {/* 注册表单 */}
                <div className="register-box">
                    <WingBlank>
                        <InputItem
                            placeholder="用户名"
                            error={this.state.usernameHasError}
                            onErrorClick={this.usernameErrorClick}
                            onChange={this.usernameChange}
                            value={this.state.username}
                        />

                        <WhiteSpace />

                        <InputItem
                            placeholder="昵称"
                            error={this.state.nicknameHasError}
                            onErrorClick={this.nicknameErrorClick}
                            onChange={this.nicknameChange}
                            value={this.state.nickname}
                        />

                        <WhiteSpace />

                        <InputItem
                            type="password"
                            placeholder="密码"
                            error={this.state.passwordHasError}
                            onErrorClick={this.passwordErrorClick}
                            onChange={this.passwordChange}
                            value={this.state.password}
                        />

                        <WhiteSpace />

                        <Button type="primary" onClick={this.register}>
                            注册
                        </Button>

                        <WhiteSpace />

                        <Button
                            type="ghost"
                            size="small"
                            onClick={() => this.props.history.push('/login')}
                        >
                            已有账号？去登录
                        </Button>
                    </WingBlank>
                </div>
            </div>
        );
    }
}

export default Register;
